<template>
  <div>
    <van-checkbox v-model="checked" @click="checkbox">
      <template #icon="props">
        <img class="icon-24" :src="props.checked ? activeIcon : inactiveIcon" alt=""/>
      </template>
    </van-checkbox>
  </div>
</template>
<script>
import TodoChecked from '@/static/icon/radio/20px_todo_checked.png'
import TodoUnchecked from '@/static/icon/radio/20px_todo_unchecked.png'

export default {
  name: "FieldCheckbox",
  props: {
    checked: { type: Boolean, default: () => false },
    type: { type: Number, default: () => 1 },
  },
  components: {
  },
  mounted() {
    switch (this.type) {
      case 1:
        this.activeIcon = TodoChecked
        this.inactiveIcon = TodoUnchecked
        break
    }
  },
  data() {
    return {
      activeIcon: TodoChecked,
      inactiveIcon: TodoUnchecked,
    };
  },
  methods: {
    checkbox() {
      this.$emit("todoCheckboxEvent")
    },
  },
};
</script>

<style scoped>
.van-checkbox {
  height: 28px;
}
</style>